<div class="grid-view" ng-controller="GridCtrl">
    <div class="grid-wrapper animate-slide-right"
         ng-switch on="gridSelect">
        <div class="grid-page" ng-switch-when="before">
            <ul class="grid-page-wrapper">
                <li class="grid-item" ng-repeat="item in productPages(gridCurrent)"
                        ng-click="productSelected()">
                    <div class="grid-item-img" style="{{item.img}}"></div>
                    <div class="grid-item-info">
                        <div class="grid-item-label">{{item.name}}</div>
                        <div class="grid-item-price">{{item.price}}</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="grid-page" ng-switch-when="after">
            <ul class="grid-page-wrapper">
                <li class="grid-item" ng-repeat="item in productPages(gridCurrent)"
                    ng-click="productSelected()">
                    <div class="grid-item-img" style="{{item.img}}"></div>
                    <div class="grid-item-info">
                        <div class="grid-item-label">{{item.name}}</div>
                        <div class="grid-item-price">{{item.price}}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="grid-tag-list">
        <div class="grid-tag-item transit selected {{gridCurrent == $index}}"
             ng-repeat="item in productPages()"
             ng-click="gridNumSelect()">{{$index+1}}
        </div>
    </div>

</div>